<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>oem</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="body">
        <div class="opterationfixed">
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf1"></i></div>
                <div class="text_opt_notice">页面</div>
            </div>
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf2"></i></div>
                <div class="text_opt_notice">组件</div>
            </div>
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf3"></i></div>
                <div class="text_opt_notice">主题</div>
            </div>
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf4"></i></div>
                <div class="text_opt_notice">设置</div>
            </div>
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf5"></i></div>
                <div class="text_opt_notice">辅助</div>
            </div>
            <div class="item">
                <div class="i_div"><i class="icon_optf icon_optf6"></i></div>
                <div class="text_opt_notice">主容器</div>
            </div>
        </div>
        <div style="width: 500px; margin: 0 auto;">
            <div class="themeList-u">
                <ul class="clearfix">
                    <li class="selected">
                        <div class="item">
                            <div class="img"><img src="images/image-empty.png"/></div>
                            <div class="tml-opt clearfix">
                                <div class="tml-color"><span class="color-value" style="background-color: brown;"></span></div>
                                <div class="tml-preview"><a href="">预览</a></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="img"><img src="images/image-empty.png"/></div>
                            <div class="tml-opt clearfix">
                                <div class="tml-color"><span class="color-value" style="background-color: brown;"></span></div>
                                <div class="tml-preview"><a href="">预览</a></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="img"><img src="images/image-empty.png"/></div>
                            <div class="tml-opt clearfix">
                                <div class="tml-color"><span class="color-value" style="background-color: brown;"></span></div>
                                <div class="tml-preview"><a href="">预览</a></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="img"><img src="images/image-empty.png"/></div>
                            <div class="tml-opt clearfix">
                                <div class="tml-color"><span class="color-value" style="background-color: brown;"></span></div>
                                <div class="tml-preview"><a href="">预览</a></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="img"><img src="images/image-empty.png"/></div>
                            <div class="tml-opt clearfix">
                                <div class="tml-color"><span class="color-value" style="background-color: brown;"></span></div>
                                <div class="tml-preview"><a href="">预览</a></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="height: 50px;"></div>
        <div style="width:500px; margin:0 auto;">
            <div class="icon-compontent-list">
                <ul class="clearfix">
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent2"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent3"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <div class="icon"><i class="icon-compontent icon-compontent1"></i></div>
                            <div class="name">文本</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="height: 80px;"></div>
        <!-- 编辑框框 -->
        <div class="opt-wire">
            <div style="background: #eee;">
                <div style="max-width: 1200px; margin:0 auto;">
                    <div style="height: 120px; background: #F8C0F3;"></div>
                    <div class="add-compt">
                        <div class="add-compt-pop">
                            <div class="ic-add"><span>+</span></div>
                            <div class="line"></div>
                        </div>
                    </div>
                    <div style="height: 120px; background: #8DCD54;"></div>
                </div>
            </div>
            <div class="opt-wire-move"><i class="icon-opt-move"></i></div>
            <div class="opt-wire-t"></div>
            <div class="opt-wire-r"></div>
            <div class="opt-wire-b"></div>
            <div class="opt-wire-l"></div>
        </div>
        <div class="opt-toolbar" style="left: 300px; top: 680px;">
            <div class="opt-toolbar-in">
                <div class="opt-toolbar-l"><i class="icon-opt icon-opt-edit"></i> 编辑主容器</div>
                <div class="opt-toolbar-r">
                    <div class="opt-btn"><i class="icon-opt icon-opt-add"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-left"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-right"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-top"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-bottom"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-set"></i></div>
                    <div class="opt-btn"><i class="icon-opt icon-opt-delete"></i></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>